import { SERVICES } from '@/common';
import { Card, Tag } from 'antd';
import React from 'react';
import styles from './index.less';

export interface ICarProps {
	dataSource: Record<string, any>;
	[key: string]: any;
}

const CarDetail: React.FC<ICarProps> = ({ dataSource }) => {
	const [index, setIndex] = React.useState(() => {
		return 0;
	});

	return (
		<div className={styles.container}>
			<Card>
				<h3>车辆信息</h3>
				<section className={styles.detail}>
					<div className={styles.left}>
						<div className={styles.image_detail}>
							<img src={SERVICES + dataSource?.photos?.[index]?.url} alt="" />
						</div>
						<ul
							className={styles.image}
							onMouseOver={(e) => {
								let curIndex;
								if (e.target.nodeName === 'LI') {
									curIndex = parseInt(e.target.dataset.index);
									setIndex(curIndex);
								}
								if (e.target.nodeName === 'IMG') {
									curIndex = parseInt(e.target.parentNode.dataset.index);
									setIndex(curIndex);
								}
							}}
						>
							{dataSource?.photos?.map((item: Record<string, any>, index: number) => {
								return (
									<li key={item.id} data-index={index} className={styles.image_item}>
										<img src={SERVICES + item.url} alt="" />
									</li>
								);
							})}
						</ul>
					</div>
					<div className={styles.right}>
						<div>
							拥有者： <span className={styles.right_text}>{dataSource?.user?.name}</span>
						</div>
						<div>
							车牌号： <span className={styles.right_text}>{dataSource?.license_plate}</span>
						</div>
						<div>
							品&nbsp;&nbsp;&nbsp;&nbsp;牌：{' '}
							<span className={styles.right_text}>{dataSource?.brand}</span>
						</div>
						<div>
							状&nbsp;&nbsp;&nbsp;&nbsp;态：{' '}
							<span className={styles.right_text}>
								{dataSource?.status === '0' ? (
									<Tag color="green">运行中</Tag>
								) : dataSource?.status === '1' ? (
									<Tag color="yellow">待维修</Tag>
								) : (
									<Tag color="blue">已维修</Tag>
								)}
							</span>
						</div>
					</div>
				</section>
				<h3>基本信息</h3>
				<section className={styles.detail}>
					<div className={styles.detail_text}>
						<span>型号：{dataSource?.shape}</span>
						<span>排量：{dataSource?.displacement}</span>
						<span>颜色：{dataSource?.color || '-'}</span>
					</div>
				</section>
			</Card>
		</div>
	);
};

export default CarDetail;
